import React from 'react'
import './AIPLanCard.css'
import CoinIcon from '../../../res/images/web/shared/coin.png'

const AIPlanCard = props => {

    const {
        planData: {
            date,
            status,
            price,
            category,
            policy,
            games,
        }
    } = props


    return <div className='ai-plan-card-ctn'>
        <div className='ai-plan-card-header flex-space-between-align-center'>
            <span className='ai-plan-card-header-date'>{date}</span>
            <span className={status ? 'ai-plan-card-header-status-available' : 'ai-plan-card-header-status-closed'}>{status ? '可购买' : '已截止'}</span>
        </div>
        <div className='ai-plan-card-main'>
            <div className='ai-plan-card-category'>
                <span>{category}</span>
            </div>
            <div className='ai-plan-card-games'
            >
                <span>{games}</span>
            </div>
            <div
                className='flex-space-between-align-center'
                style={{
                    width: '100%',
                }}
            >
                <div className='ai-plan-card-policy'>
                    <span>{policy}</span>
                </div>
                <div className='ai-plan-card-price flex-center-align-center'>
                    <img alt='' src={CoinIcon}/>
                    <span>{price}</span>
                </div>
            </div>
            <div className={status ? 'ai-plan-card-btn-available' : 'ai-plan-card-btn-closed'}>
                <span>立即查看</span>
            </div>
        </div>
    </div>

}

export default AIPlanCard